<template>
    <div>
    <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
   <!-- 卡片视图  -->
      <el-card class="box-card">

<!--          搜索与添加区域-->
        <el-row :gutter="20">
          <el-col :span="7">
<!--            为搜索框绑定数据 -->
            <el-input placeholder="请输入内容" v-model = "queryInfo.query" clearable @clear="getUserList">
<!--              按钮绑定点击事件 -->
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
          </el-col>
        </el-row>

<!--        用户列表区域   -->
        <el-table
          :data="userList"
          style="width: 100%"
          border
          stripe
        >
          <el-table-column label = "#" type="index"></el-table-column>
          <el-table-column label = "姓名" prop="username"></el-table-column>
          <el-table-column label = "邮箱" prop="email"></el-table-column>
          <el-table-column label = "电话" prop="mobile"></el-table-column>
          <el-table-column label = "角色" prop="role_name"></el-table-column>
          <el-table-column label = "状态">
<!--            作用域插槽  -->
            <templates slot-scope = "scope">
<!--              {{scope.row}}可以选中这一行的数据  -->
              <el-switch
                v-model="scope.row.mg_state" @change = "userStateChanged(scope.row)">
              </el-switch>

            </templates>
          </el-table-column>
          <el-table-column label = "操作" width="190px">
            <templates slot-scope = "scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click = "showEditDialog(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini"
                       @click="removeUserById(scope.row.id)"
            ></el-button>
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-setting" size="mini"  @click="showSetRole(scope.row)"></el-button>
            </el-tooltip>
            </templates>
          </el-table-column>
        </el-table>

<!--        分页区域-->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>

<!--      dialog 添加用户对话框-->
      <el-dialog
        title="添加用户"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClose"
       >
      <!--对话框主体区  :model="addForm" 数据绑定对象   :rules="addFormRules" 验证规则对象
      ref="addFormRef"  引用对象  prop="username" 具体的校验规则
      v-model="addForm.username" 数据的双向绑定-->
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="addForm.email"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="mobile">
            <el-input v-model="addForm.mobile"></el-input>
          </el-form-item>
        </el-form>
      <!--按钮区        -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
<!--          <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>-->
          <!--添加提交预处理操作          -->
          <el-button type="primary" @click="addUser">确 定</el-button>

        </span>
      </el-dialog>



      <!--      dialog 修改用户对话框-->
      <el-dialog
        title="修改用户"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editDialogClose"
      >
        <!--对话框主体区  :model="addForm" 数据绑定对象   :rules="addFormRules" 验证规则对象
        ref="addFormRef"  引用对象  prop="username" 具体的校验规则
        v-model="addForm.username" 数据的双向绑定-->
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px" >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="editForm.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="editForm.email"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="mobile">
            <el-input v-model="editForm.mobile"></el-input>
          </el-form-item>
        </el-form>
        <!--按钮区        -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <!--          <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>-->
          <!--添加提交预处理操作          -->
          <el-button type="primary" @click="editUser">确 定</el-button>

        </span>
      </el-dialog>

      <!-- 分配角色对话框 -->
      <el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed">
        <div>
          <p>当前用户：{{userInfo.username}}</p>
          <p>当前角色：{{userInfo.role_name}}</p>
          <p>
            分配角色：
            <el-select
              v-model="selectRoleId"
              filterable
              allow-create
              default-first-option
              placeholder="请选择文章标签"
            >
              <el-option
                v-for="item in rolesLsit"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              ></el-option>
            </el-select>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="setRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
      </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
          //自定义 校验规则
          //验证邮箱的规则
          var checkEmail = (rule,value,callback) =>{
            const regEmail = /^\w+@\w+(\.\w+)+$/
              if (regEmail.test(value)) {
                // 合法邮箱
                return callback()
              }
            callback(new Error('请输入合法邮箱'))
          }
          //验证手机号的规则
          var checkMobile = (rule, value, callback)=>{
            const regMobile = /^1[34578]\d{9}$/
            if (regMobile.test(value)) {
              return callback()
            }
            // 返回一个错误提示
            callback(new Error('请输入合法的手机号码'))
          }

          return {
            //获取用户列表的参数对象  分装好在发送给后端   可以写在 params中 {包装起来}【不推荐第二种方法】
            queryInfo:{
              query:'',
              //当前的页数
              pagenum:1,
              //当前每页显示多少条数据
              pagesize:2
            },
            //所有的用户列表
            userList:[],
            total:6,
            addDialogVisible : false, // 添加用户对话框 //false 代表对话框隐藏

            editDialogVisible: false, //修改用户对话框
            addForm:{
              username:'',
              password:'',
              email:'',
              mobile:'',
            },
            editForm:{},
            addFormRules:{
              username:[
                {request:true,message:'请输入用户名',trigger:'blur'},
                {min:3,max:10,message:"用户名的长度在3-10个字符之间",trigger: 'blur'}
              ],
              password:[
                {request:true,message:'请输入密码',trigger:'blur'},
                {min:6,max:15,message:"用户名的长度在6-15个字符之间",trigger: 'blur'}
              ],
              email:[
                {request:true,message:'请输入邮箱',trigger:'blur'},
                { validator: checkEmail, trigger: 'blur' }

              ],
              mobile:[
                {request:true,message:'请输入邮箱',trigger:'blur'},
                { validator: checkMobile, trigger: 'blur' }
              ]
            },
            editFormRules:{
              email:[
                {request:true,message:'请输入邮箱',trigger:'blur'},
                { validator: checkEmail, trigger: 'blur' }

              ],
              mobile:[
                {request:true,message:'请输入邮箱',trigger:'blur'},
                { validator: checkMobile, trigger: 'blur' }
              ]
            },
            //控制分配角色对话框的显示与隐藏。
            setRoleDialogVisible:false,
            // 当前需要被分配角色的用户
            userInfo: {},
            // 所有角色数据列表
            rolesLsit: [],
            // 已选中的角色Id值
            selectRoleId: ''

          }
        },
      created(){
        this.getUserList()
      },
      methods:{
          async getUserList(){
            const{data:res}=await this.$http.get('users',{params: this.queryInfo})
            if(res.meta.status!=200){
              return this.$message.error('获取用户列表失败！')
            }
            this.userList = res.data.users
            this.total = res.data.total
            console.log(res)
          },
        //监听pagesize 改变的事件
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          //前端选中
          this.queryInfo.pagesize = val;
          //后端重新发送请求
          this.getUserList();
        },
        //监听 页码值 改变的事件
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.queryInfo.pagenum = val;
          this.getUserList();
        },
        //监听 switch 开关状态的改变
        async userStateChanged(userInfo){
            console.log(userInfo);
            //``  是url模板
            const {data : res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
          console.log(res);
          if(res.meta.status !== 200){
            //当后端修改失败的时候   前端的按钮要恢复过来 保持一致
            userInfo.mg_state = !userInfo.mg_state
            return this.$message.error('更新用户状态失败！')
          }
          this.$message.success("更新用户状态成功！")
        },
        //监听添加用户对话框的关闭事件
        addDialogClose(){
          this.$refs.addFormRef.resetFields()
        },
        //点击按钮 添加新用户
        addUser(){
          this.$refs.addFormRef.validate(async valid=>{
            // console.log(valid)
            if(!valid){
              return;
            }
            //通过预校验的 就可以提交添加用户的请求
            const {data:res} = await this.$http.post('users',this.addForm)
            if(res.meta.status!=201){
              this.$message.error("添加用户失败！")
            }
            this.$message.success("添加用户成功！")
            //隐藏添加用户的对话框
            this.addDialogVisible = false
            //重新获取用户列表数据
            this.getUserList()
          })
        },
        //展示编辑用户的对话框
        async showEditDialog(id){
          const {data:res} = await this.$http.get('users/'+id)
          if(res.meta.status !== 200) {
            return this.$message.error("查询用户失败！")
          }
          this.editForm = res.data
          // console.log(id);
          this.editDialogVisible = true;
        },
        //监听修改用户对话框的关闭事件
        editDialogClose(){
          this.$refs.editFormRef.resetFields()
        },
        //修改用户信息并提交
        editUser(){
          this.$refs.editFormRef.validate(async valid=>{
            // console.log(valid)
            if(!valid){
              return;
            }
            //通过预校验的 就可以提交添加用户的请求
            const {data:res} = await this.$http.put('users/'+this.editForm.id,{
              email:this.editForm.email,
              mobile:this.editForm.mobile,
            })
            if(res.meta.status!=200){
              this.$message.error("更新用户失败！")
            }
            this.$message.success("更新用户成功！")
            //隐藏添加用户的对话框
            this.editDialogVisible = false
            //重新获取用户列表数据
            this.getUserList()
          })
        },

        //根据ID删除对应的用户信息
        async removeUserById(id){
          const confirmResult = await this.$confirm(
            '此操作将永久删除该文件, 是否继续?',
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }
          ).catch(err=>err) //简写（抛出异常）
          //如果用户确定删除，则返回值为字符串confirm
          //如果用户取消了删除,则返回值为字符串 concel
          // console.log(confirmResult)
          if(confirmResult!=="confirm"){
            return this.$message.info("已取消删除")
          }

          // console.log("确定了删除")
          const {data: res} = await this.$http.delete('users/'+id)

          if(res.meta.status!==200){
            return this.$message.error("删除用户失败！")
          }

          this.$message.success("删除用户成功！")
          this.getUserList()
        },
        // 展示分配角色的对话框
        async showSetRole (role) {
          this.userInfo = role
          // 展示对话框之前，获取所有角色列表
          const { data: res } = await this.$http.get('roles')
          if (res.meta.status !== 200) {
            return this.$message.error('获取角色列表失败！')
          }
          this.rolesLsit = res.data
          this.setRoleDialogVisible = true
        },
        // 分配角色
        async saveRoleInfo () {
          if (!this.selectRoleId) {
            return this.$message.error('请选择要分配的角色')
          }
          const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectRoleId })
          if (res.meta.status !== 200) {
            return this.$message.error('更新用户角色失败！')
          }
          this.$message.success('更新角色成功！')
          this.getUserList()
          this.setRoleDialogVisible = false
        },
        // 分配角色对话框关闭事件
        setRoleDialogClosed () {
          this.selectRoleId = ''
          this.userInfo = {}
        }
      }


    }
</script>

<style  scoped>

</style>
